<template>
  <div>
    <el-dialog
      title="上传附件"
      :visible.sync="uploadVisible"
      width="700px"
      :close-on-click-modal="false"
      @closed="cancelUploadDialog"
    >
      <div style="min-height: 250px">
        <el-upload
          ref="upload"
          :limit="10"
          multiple
          accept="*.*"
          :action="uploadUrl"
          :headers="upload.headers"
          :file-list="upload.fileList"
          :on-progress="handleFileUploadProgress"
          :on-success="handleFileSuccess"
          :on-error="handleFileError"
          :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" :loading="upload.isUploading" @click="submitUpload">上传到服务器</el-button>
          <div slot="tip" class="el-upload__tip">单个文件大小不超过50MB,总大小不超过100MB</div>
        </el-upload>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelUploadDialog">关 闭</el-button>
      </div>
    </el-dialog>

    <el-dialog title="附件管理" :visible.sync="open" width="780px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="文章标题" prop="noticeTitle">
              <el-input disabled v-model="form.noticeTitle" placeholder="请输入公告标题" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="文章类型" prop="noticeType">
              <el-select disabled v-model="form.noticeType" placeholder="请选择公告类型">
                <el-option
                  v-for="dict in dict.type.sys_notice_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template>
        <div class="txt-right mb10">
          <el-button
          type="success"
          size="small"
          @click.native="uploadVisible = true"
          >新增附件</el-button>
        </div>


        <el-table
          :data="tableData"
          :max-height="500"
          style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column
            prop="fileName"
            label="文件名称"
            class="overflow-hidden"
            >
          </el-table-column>
          <el-table-column
            label="下载链接"
          >
            <template v-slot:default="{row}" >
              <div class="overflow-hidden" >{{row.filePath}}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            width="100">
            <template v-slot:default="{row}" >
              <el-popover
                placement="top"
                v-model="row.popoverVisible"
                trigger="click"
              >
                <p>确认要删除<{{row.fileName}}></p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="row.popoverVisible = false">取消</el-button>
                  <el-button type="primary" size="mini" @click="handleDelNoticeAttach(row)">确定</el-button>
                </div>
                <template v-slot:reference>
                  <el-button type="text" size="small">删除</el-button>
                </template>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </template>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { listNoticeAttachById, delNoticeAttach } from '@/api/system/noticeAttach'
import { getToken } from "@/utils/auth";

export default {
  name: "attach-dialog",
  dicts: ['sys_notice_status', 'sys_notice_type'],
  data() {
    return {
      visible: false,
      open: false,
      uploadVisible:false,
      form: {

      },
      noticeId: null,
      tableData:[],
      // 上传附件
      upload: {  // 专门的上传配置
        // 是否禁用上传
        isUploading: false,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的文件列表
        fileList: []
      },
    }
  },
  computed: {
    uploadUrl() {
      return process.env.VUE_APP_BASE_API + `/system/noticeAttach/upload?noticeId=${this.form.noticeId}`
    }
  },
  methods: {
    /* 设置当前通知的信息 */
    setForm(row) {
      this.form = row
      this.tableData = []
      const { noticeId } = row
      this.noticeId = noticeId
      this.getAttach(noticeId)
      this.open = true
    },
    getAttach(noticeId) {
      listNoticeAttachById(noticeId).then(res => {
        const {data} = res
        this.tableData = data
      })
    },
    submitForm() {

    },
    cancel() {
      this.tableData = []
      this.open = false;
    },
    // 关闭上传弹窗
    cancelUploadDialog() {
      this.uploadVisible = false
      this.upload.fileList = []
      this.getAttach(this.noticeId)
    },
    // 文件提交处理
    submitUpload() {
      // if ( this.upload.fileList.length === 0) {
      //   this.$notify.warning('已经完成上传或未选取文件')
      //   return
      // }
      this.$refs.upload.submit();
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.isUploading = false;
      this.form.filePath = response.url;
      this.$message.success(response.msg);
      console.log(file)
      console.log(fileList)
    },
    handleFileError(response, file, fileList) {
      this.$message.error("文件上传错误，最大单个文件50MB，总大小100MB");
    },
    handleDelNoticeAttach({attachmentId}) {
      delNoticeAttach(attachmentId).then(() => {
        this.$message.success('删除成功')
        this.getAttach(this.noticeId)
      })
    }
  }
}
</script>

<style scoped lang="scss">
.overflow-hidden {
  overflow: hidden;
  overflow-x: scroll;
  // text-overflow: ellipsis;
  white-space: nowrap;
}
.txt-right {
  text-align: right;
}
</style>


